<template>
  <div id="detail">
    <div class="detail-container">
      <div class="detail-bar">
        <div class="detail-title">明细数据</div>
        <el-button type="primary" class="btn-export" @click="outExport">导出</el-button>
      </div>
      <div class="sort">
        <div class="dishes">
          <div class="text">销售额</div>
          <div class="num">￥{{ salesAmount }}</div>
        </div>

        <div class="dishes">
          <div class="text">退单额</div>
          <div class="num">￥{{ refundAmount }}</div>
        </div>

        <div class="dishes">
          <div class="text">收入</div>
          <div class="num">￥{{ income }}</div>
        </div>

        <div class="dishes">
          <div class="text">现金支付</div>
          <div class="num">￥{{ payByCash }}</div>
        </div>

        <div class="dishes">
          <div class="text">线上支付</div>
          <div class="num">￥{{ payOnline }}</div>
        </div>

        <div class="dishes">
          <div class="text">扫码支付</div>
          <div class="num">￥{{ payByScan }}</div>
        </div>

        <div class="dishes">
          <div class="text">收银员</div>
          <div class="num">{{ staffAmount }}人</div>
        </div>

        <div class="dishes">
          <div class="text">客单量</div>
          <div class="num">{{ sales }}笔</div>
        </div>
      </div>

      <div class="table">
        <el-table :data="storeList" border style="width: 100%" class="table-bgc" stripe>
          <el-table-column type="index" label="序号" width="90">
          </el-table-column>
          <el-table-column prop="orderTime" label="日期" width="160">
          </el-table-column>
          <el-table-column prop="payAmount" label="收入">
          </el-table-column>
          <el-table-column prop="totalPrice" label="销售额"> </el-table-column>
          <el-table-column prop="refundAmount" label="退单额"> </el-table-column>
          <el-table-column prop="sales" label="客单量(笔)"> </el-table-column>
          <el-table-column prop="discountAmount" label="优惠额度"> </el-table-column>
          <el-table-column prop="staff" label="收银员"> </el-table-column>
        </el-table>
      </div>
      <Pagination @shareData="getInfo" :totalCount="totCount"></Pagination>
    </div>
  </div>
</template>

<script>
//导入全局导出文件
import exportUtils from '../exportUtils'

import bus from '../EventBus'
import Pagination from '../../common/Pagination.vue'
export default {
  data() {
    return {
      storeList: [],
      salesAmount: 0, //销售额
      refundAmount: 0, //退单额
      income: 0, //收入
      payByCash: 0, //现金支付
      payOnline: 0, //线上支付
      payByScan: 0, //扫码支付
      staffAmount: 0, //收银员
      sales: 0, //客单量

      //开始时间
      startTime: '',
      //开结束时间
      endTime: '',
      //当前页数
      page: 1,
      //当前页数显示条数
      pageSize: 5,
      //数据总条数
      totCount: 0,

      //双向绑定的时间范围值
      value: '',

      code: 20000
    }
  },

  created() {
    this.getStoreData()
    bus.$on('getStoreData', (val1, val2, val3) => {
      this.storeList = val1
      this.totCount = val2
      this.startTime = val3[0]
      this.endTime = val3[1]
      // console.log(val3)
      this.getStoreData()
    })
  },

  methods: {
    //调取店铺营收接口渲染列表数据
    async getStoreData() {
      const { data: res } = await this.axios.post('/revenueStatement/list', {
        startTime: this.startTime,
        endTime: this.endTime,
        page: this.page,
        pageSize: this.pageSize
      })
      // console.log(res)
      if (res.code !== 200) return console.log('调用接口失败！')
      this.storeList = res.data.list
      // console.log(this.storeList)

      this.salesAmount = res.data.salesAmount //销售额
      this.refundAmount = res.data.refundAmount //退单额
      this.income = res.data.income //收入
      this.payByCash = res.data.payByCash //现金支付
      this.payOnline = res.data.payOnline //线上支付
      this.payByScan = res.data.payByScan //扫码支付
      this.staffAmount = res.data.staffAmount //收银员
      this.sales = res.data.sales //客单量

      this.totCount = res.count //数据总条数

      // 遍历数组修改数据
      this.storeList.forEach(item => {
        // console.log(item)
        item.orderTime = this.timeTransfer(item.orderTime)
      })

      //将部分组件中的值传递给父组件
      this.$emit('getStoreData', this.storeList, this.totCount)
    },
    //分页子组件向当前父组件传值
    getInfo(val) {
      // console.log(val)
      this.page = val.nowPage
      this.pageSize = val.pageCount
      this.getStoreData()
    },
    // 时间戳转换为当地时间的方法
    timeTransfer(timestamp) {
      let time = new Date(timestamp)
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let date = time.getDate()
      let hours = time.getHours()
      let minute = time.getMinutes()

      if (month < 10) {
        month = '0' + month
      }
      if (date < 10) {
        date = '0' + date
      }
      if (hours < 10) {
        hours = '0' + hours
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute
    },

    //点击导出 调用导出接口
    outExport() {
      let params = { code: this.code }
      let myObj = {
        method: 'get',
        url: 'http://172.16.8.6:8082/admin/revenueStatement/export', //接口地址
        fileName: '营收报表',
        data: params
      }
      //调用封装方法
      exportUtils.exportMethod(myObj)
    }
  },

  components: {
    Pagination
  }
}
</script>

<style lang="less" scoped>
.detail-container {
  background-color: #fff;
  border: 0.1rem solid #dbe0e9;
  margin-top: 2rem;
  .detail-bar {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.1rem solid #dbe0e9;
    background-color: #f2f2f2;
    .detail-title {
      height: 4rem;
      background-color: #f2f2f2;
      box-sizing: border-box;
      line-height: 4rem;
      font-size: 1.4rem;
      padding-left: 3rem;
      font-weight: 500;
      color: #666666;
    }
    .btn-export {
      margin-right: 3rem;
      font-size: 1.4rem;
      line-height: 1rem;
      padding: 8px 20px;
    }
  }
}
.sort {
  background-color: #f5f6fc;
  line-height: 2rem;
  margin: 1.5rem;
  display: flex;
  justify-content: space-around;
  .dishes {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .text {
      font-size: 1.5rem;
      color: #606266;
    }
    .num {
      margin-top: 0.5rem;
      padding: 0.2rem 3rem;
      border: 0.1rem solid #dcdfe6;
    }
  }
}
.table {
  background-color: #fff;
  padding: 1.5rem;
  .el-table--border {
    background-color: #f5f6fc;
    padding: 0.5rem;
    box-sizing: border-box;
  }
}

.detail-bar {
  align-items: center;
}

/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
}
</style>
